<template>
  <div class="dashboard-container">
    <el-col :span="12">
      <div>
        <el-tabs type="border-card">
          <el-tab-pane stripe="true">
            <span slot="label">
              <i class="el-icon-date" /> 我的待办
            </span>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="task" label="任务" width="180" />
              <el-table-column prop="proCreateName" label="发起人" width="180" />
              <el-table-column prop="nodeTitle" label="节点" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="我的已办"> <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="task" label="任务" width="180" />
            <el-table-column prop="proCreateName" label="发起人" width="180" />
            <el-table-column prop="nodeTitle" label="节点" />
          </el-table></el-tab-pane>
          <el-tab-pane label="已发起"> <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="name" label="流程名称" width="180" />
            <el-table-column prop="nodeTitle" label="当前节点" />
            <el-table-column prop="proCreateName" label="处理人" width="180" />
          </el-table></el-tab-pane>
        </el-tabs>
      </div>
    </el-col>
    <el-col :span="12">
      <div>2</div>
    </el-col>
    <el-col :span="12">
      <div>3</div>
    </el-col>
    <el-col :span="12">
      <div>4</div>
    </el-col>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      tableData: [{
        task: '2016-05-02',
        proCreateName: '王小虎',
        nodeTitle: '上海市普陀区'
      }, {
        task: '2016-05-04',
        proCreateName: '王小虎',
        nodeTitle: '上海市普陀区'
      }, {
        task: '2016-05-01',
        proCreateName: '王小虎',
        nodeTitle: '上海市普陀区'
      }, {
        task: '2016-05-03',
        proCreateName: '王小虎',
        nodeTitle: '上海市普陀区'
      }]
    }
  },
  computed: {
    ...mapGetters(['name'])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 20px;
  }

  &-text {
    font-size: 20px;
    line-height: 30px;
  }
}
</style>
